<template>
  <div class="classroomMamage">
    <el-card>
      <div class="opt_wrap">
        <div class="opt_wrap_left">
          <p>
            已选中
            <span style="color: #1796EB">{{ selectedNum }}</span>项
          </p>
          <el-button size="mini" type="primary" v-if="showBtn" @click="multiOperate">
              {{params.mode == 'bind'?'关联':"删除"}}
          </el-button>
        </div>
      </div>
      <div class="search_wrap">
        <label class="search_label">文件ID:</label>
        <el-input placeholder="文件ID或文件名称" clearable v-model="searchCondition" style="width: 260px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="queryListData">搜索</el-button>
        <el-button
          type="primary"
          style="float:right"
          v-if="params.mode == 'all'"
          @click="dialogUploadVisiable = true"
        >添加课件</el-button>
      </div>
      <div class="table_list">
        <el-table
          ref="nicheTable"
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          @selection-change="handleSelectionNiche"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column type="selection" align="center" width="40" />
          <el-table-column
            v-for="(item,index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- 所有模式 -->
              <el-link
                type="danger"
                v-if="params.mode == 'all'"
                @click="singleOperate(scope.row.fileid)"
              >删除</el-link>
              <!-- 查看课件模式 -->
              <el-link
                type="danger"
                v-if="params.mode == 'room'"
                @click="singleOperate(scope.row.fileid)"
              >删除</el-link>
              <!-- 关联模式 -->
              <el-link
                v-if="params.mode == 'bind'"
                type="primary"
                @click="singleOperate(scope.row.fileid)"
              >关联</el-link>
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>
    <el-dialog title="上传课件" :visible.sync="dialogUploadVisiable">
      <el-form>
        <el-form-item label="操作类型">
          <el-radio v-model="radio" label="1">本地上传</el-radio>
        </el-form-item>
        <el-form-item label="选择文件">
          <el-upload
            class="upload-demo"
            :headers="{
              token:token
            }"
            :action="roomUploadFileURL"
            name="filedata"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
            :on-error = "uploadError"
            :limit="9999"
            :on-progress="onUploading"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">您可以上传资料文件大小限制在100M以内,文件的类型如下(*.xls;*.xlsx;*.ppt;*.pptx;*.doc;*.docx;*.txt;*.pdf;*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.mp3;*.mp4)</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUploadVisiable = false">取 消</el-button>
        <el-button type="primary" @click="dialogUploadVisiable = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//import statisticsTag from "@/components/statisticsTag";
import { paginationMixin, deleteMixin } from "@/mixin";
import http from "@/api/room";
import { roomUploadFileURL } from "@/utils/url";
import { formatDate, formatArray } from "@/utils";
export default {
  name: "courseware",
  mixins: [paginationMixin],
  data() {
    return {
      token:sessionStorage.getItem('access_token'),
      params: {
        
        serial: "0",
        mode: "all" //all:所有模式 room:查看课件模式  bind:关联模式
      },
      formData: {},
      http: http,
      dialogUploadVisiable: false, //上传框是否可见
      radio: "1",
      roomUploadFileURL, //上传地址
      file: null, //上传文件
      selectedNum: 0,
      showBtn: false,
      showDelModal: false,
      searchCondition: null,
      queryDate: null,
      step: null,
      steps: null,
      type: null,
      types: null,
      loading: false,
      is_uploading: false, //上传状态
      total: 1,
      tableCaption: [
        {
          label: "文件ID",
          value: "fileid",
          width: 150
        },
        {
          label: "文件名称",
          value: "filename",
          width: 400
        },
        {
          label: "文件大小",
          value: "size",
          width: 200
        },
        {
          label: "创建时间",
          value: "uploadtime",
          width: 200
        },
        {
          label: "状态",
          value: "isConvertText",
          width: 200
        },
        {
          label: "上传者",
          value: "uploadusername",
          width: 200
        }
      ],
      tableListData: [],
      status: null,
      examineModal: false,
      infoTittle: null,
      infoDetail: [],
      examineForm: {},
      examineRules: {},
      infoRemark: "",
      detailInfo: null,
      delNiche: null //删除id数组
    };
  },
  methods:{
    //路由跳转
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    //上传成功处理
    handleUploadSuccess(res, file) {
      console.log("res, file:", res, file);
      this.formData[""] = res.data;
      this.file = URL.createObjectURL(file.raw);
      this.$message.success(res.msg || "上传成功！");
    },
    //上传前处理
    beforeUpload(file){
      // const isPicture =
      //   file.type === "image/jpeg" ||
      //   file.type === "image/png" ||
      //   file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      return isLt2M;
    },
    //上传失败
    onUploading(){
      this.is_uploading = true
    },
    //上传错误
    uploadError(){
      this.is_uploading = false
      this.$message.error("上传失败!");
    },
    searchStatus(status) {
      this.status = status;
      this.getListData();
    },
    //路由跳转
    goToURL(name, query) {
      this.$router.push({ name, query });
    },
    queryListData() {
      this.getListData();
    },
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      status = this.status
    ) {
      this.loading = true;
      let params = { page, list_rows, search, status };
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      this.nicheStatus = formatArray(basicConfig.opport_status);
      console.log(basicConfig);
      //所有模式或关联模式
      if (this.params.mode == "all" || this.params.mode == "bind") {
        http.getcompanyfilelist(params).then(res => {
          console.log(res);
          this.loading = false;
          //this.total = res.data.total;
          let tableListData = res.data;
          tableListData.map(item => {
            if (item.isconvert == 0) {
              item.isConvertText = "转换中";
            } else {
              item.isConvertText = "转换完成";
            }
          });
          this.tableListData = tableListData;
        });
      }
      //查看模式
      else {
        params.serial = this.params.serial;
        http.getRoomFile(params).then(res => {
          this.loading = false;

          //this.total = res.data.total;
          let tableListData = res.data;
          tableListData.map(item => {
            if (item.isconvert == 0) {
              item.isConvertText = "转换中";
            } else {
              item.isConvertText = "转换完成";
            }
          });
          this.tableListData = tableListData;
        });
      }
    },
    //添加多个id
    handleSelectionNiche(val) {
      console.log(val);
      this.selectionCustomer = val;
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.fileid);
        }
      }
      else {
        this.delNiche = [];
      }
      this.delNiche = JSON.parse(JSON.stringify(this.delNiche));
      console.log(this.delNiche)
    },
    init() {
      console.log(this.roomUploadFileURL);
      this.getListData();
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
    },
    //删除操作
    handleOperate(params) {
      switch (this.params.mode) {
        case "all": //企业删除
          this.$confirm("确认删除吗?", "提示", {
            confirmButtonClass: "el-button--danger"
          })
            .then(() => {
              this.http.deleteFile(params).then(res => {
                this.$message.success(res.msg || "删除成功！");
                this.getListData();
              });
            })
            .catch(res => {
              console.log(res);
            });
          break;
        case "room": //教室课件删除
        params.serial = this.params.serial
          this.$confirm("确认删除吗?", "提示", {
            confirmButtonClass: "el-button--danger"
          })
            .then(() => {
              this.http.roomDeleteFile(params).then(res => {
                this.$message.success(res.msg || "删除成功！");
                this.getListData();
              });
            })
            .catch(res => {
              console.log(res);
            });
          break;
        case "bind"://关联课件
          params.serial = this.params.serial
          this.$confirm("确认关联吗?", "提示", {
            confirmButtonClass: "el-button--danger"
          })
            .then(() => {
              this.http.roomBindFile(params).then(res => {
                this.$message.success(res.msg || "关联成功！");
                this.$router.go(-1)
              });
            })
            .catch(res => {
              console.log(res);
            });
          break;
        default:
          break;
      }
    },
    //单独文件操作
    singleOperate(id) {
      this.delNiche = [];
      this.delNiche.push(id);
      this.delNiche = JSON.parse(JSON.stringify(this.delNiche));
      var params = {
        fileidarr: this.delNiche
      };
      this.handleOperate(params);
    },
    //单独文件操作
    multiOperate(){
      var params = {
        fileidarr: this.delNiche
      };
      this.handleOperate(params);
    }
  },
  created() {
    let query = this.$route.query;
    if (query.mode) {
      //更改模式
      this.params = query;
    }
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.classroomMamage{
  padding: 10px;
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    margin-top: 34px;
    margin-bottom: 34px;
    div {
      margin-right: 17px;
    }
  }
  .see_detail {
    cursor: pointer;
    color: #1796eb;
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .operation {
    cursor: pointer;
    color: rgb(47, 156, 235);
  }
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>